<template>
    <div class="add-enrollment-container">
        <n-card
              title="完善学籍信息"
              hoverable
              class="add-enrollment-card"
        >
            <div class="form-container">
                <n-form
                      :model="enrollmentInfo"
                      :rules="rules"
                      ref="formRef"
                      label-placement="left"
                      label-align="left"
                      :label-width="100"
                      :show-require-mark="false"
                >
                    <n-form-item
                          label="学校名称"
                    >
                        {{ schoolName }}
                    </n-form-item>
                    <n-form-item label="学号">
                        {{ studentNumber }}
                    </n-form-item>
                    <n-form-item label="入学时间">
                        <n-date-picker v-model:value="enrollmentInfo.enrollTime" />
                    </n-form-item>
                    <n-form-item
                          label="院系名称"
                          path="collegeName"
                    >
                        <n-select
                              v-model:value="enrollmentInfo.collegeName"
                              :options="collegeOptions"
                        />
                    </n-form-item>
                    <n-form-item label="出生年月">
                        <n-date-picker v-model:value="enrollmentInfo.birthday" />
                    </n-form-item>
                    <n-form-item label="性别">
                        <n-radio-group v-model:value="enrollmentInfo.sex" name="radio-group">
                            <n-space>
                                <n-radio value="male"
                                         default-checked
                                >
                                    男
                                </n-radio>
                                <n-radio value="female">
                                    女
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </n-form-item>
                    <n-form-item
                          label="身份证号"
                          path="identityCardId"
                    >
                        <n-input v-model:value="enrollmentInfo.identityCardId"/>
                    </n-form-item>
                    <n-form-item>
                        <n-space justify="center">
                            <n-button
                                  @click="$emit('previous')"
                                  type="primary"
                            >
                                上一步
                            </n-button>
                            <n-button
                                  @click="submit"
                                  type="primary"
                            >
                                确认
                            </n-button>
                        </n-space>
                    </n-form-item>
                </n-form>
            </div>
        </n-card>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
    name: 'Step2',
    props: {
        studentNumber: String,
        schoolName: String
    },
    setup() {
        const formRef = ref(null)
        return {
            formRef,
            enrollmentInfo: ref({
                enrollmentClaimId: '',
                schoolName: '',
                studentNumber: '',
                enrollTime: new Date().getTime(),
                collegeName: '',
                birthday: new Date('2000-01-01').getTime(),
                sex: 'male',
                identityCardId: ''
            }),
            rules: {
                collegeName: [{required:true, message:'请选择院系',trigger:['blur','change']}],
                identityCardId: [
                    {
                        required:true,
                        message:'请填写身份证号',
                        trigger:'blur'
                    },
                    {
                        validator: (rule, value) => {
                            return /(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)
                        },
                        message: '请输入18位数字',
                        trigger: 'blur'
                    }
                ]
            },
            collegeOptions: [
                {
                    label: '计算机学院',
                    value: '计算机学院'
                },
                {
                    label: '测绘学院',
                    value: '测绘学院'
                },
                {
                    label: '外国语学院',
                    value: '外国语学院'
                },
                {
                    label: '马克思主义学院',
                    value: '马克思主义学院'
                },
                {
                    label: '法学院',
                    value: '法学院'
                }
            ]
        }
    },
    methods: {
        validForm() {
            return /(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.enrollmentInfo.identityCardId)
        },
        submit() {
            if(!this.validForm()) {
                window.$message.error('请填写正确信息！')
                return
            }
            this.$emit('addEnrollment', this.enrollmentInfo)
        }
    }
})
</script>

<style scoped lang="less">
.add-enrollment-container {
    width: 75%;
    .n-space{
        width: 100%;
    }
}
</style>

<style lang="less">
.add-enrollment-container {
    .add-enrollment-card {
        width: 65%;
    }
}
</style>